<template>
  <div>
    <div class="">
      您已选择
      <span>{{ selectList.length }}</span>
      笔订单
    </div>
    <el-input
      style="margin-top:20px"
      type="textarea"
      :autosize="{ minRows: 4, maxRows: 4 }"
      placeholder="请输入备注"
      v-model="backRemark"
    ></el-input>
    <el-checkbox style="margin-top:20px" v-model="isCoverage"
      >覆盖已有的备注内容</el-checkbox
    >
    <div class="digBottom" style="">
      <el-button size="small" @click="cancel">取 消</el-button>
      <el-button size="small" type="primary" @click="dialogSure"
        >确 定</el-button
      >
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component
export default class Remark extends Vue {
  @Prop({
    type: Array,
    default() {
      return [];
    },
  })
  selectList: any;

  /** 备注信息 */
  backRemark = "";

  /** 是否备注 */
  isCoverage = false;

  /**
   * 弹窗确认
   */
  dialogSure() {
    if (this.backRemark === "") {
      this.$message.error("备注信息不能为空");
      return;
    }
    const param = {
      backRemark: this.backRemark,
      isCoverage: this.isCoverage,
    };
    this.$emit("remarkSure", param);
  }

  /**
   * 弹窗取消
   */
  cancel() {
    this.$parent.beforeClose();
  }
}
</script>

<style lang="scss" scoped>
.digBottom {
  margin-top: 40px;
  display: flex;
  align-content: center;
  justify-content: center;
}
</style>
